<template>
        <div class="father">
                <h3>父组件</h3>
                <div class="content">
                        <Category>
                                <template #s2>
                                        <ul>
                                                <li v-for="g in games" :key="g.id">{{ g.name }}</li>
                                        </ul>
                                </template>
                                <template #s1>
                                        <h2>热门游戏排行</h2>
                                </template>
                        </Category>
                       <Food>
                                <template v-slot="params">
                                        <img :src="params.tupian"/>
                                </template>
                       </Food>
                </div>

        </div>
</template>
<script lang="ts" setup>
import Category from './Category.vue';
import Food from './Food.vue';
import {reactive } from 'vue'

let games = reactive([
        { id: 'game1', name: '黑神话：悟空' },
        { id: 'game2', name: '幻兽帕鲁' },
        { id: 'game3', name: 'pubg' }
])

</script>
<style scoped>
.father {
        background: rgb(165, 164, 164);
        padding: 20px;
        border-radius: 10px;
}

.content {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
}

img,
video {
        width: 100%;
}
</style>